<template>
  <div class="sieves-image__box">
    <div class="sieves-image__content">
      <img :src="imageUrl" class="sieves-image__content-image" alt="暂无图像" />
    </div>
    <div class="sieves-image__result">
      <div class="sieves-image__result-box">
        <div class="user_overview_nums first ">
          <dv-digital-flop :config="lumpCoalConfig" class="sieves-image__result-flop" />
        </div>
        <p class="sieves-image__result-test" style="color: #00FAFF">块煤</p>
      </div>
      <div class="sieves-image__result-box">
        <div class="user_overview_nums second " >
          <dv-digital-flop :config="slackConfig" class="sieves-image__result-flop" />
        </div>
        <p class="sieves-image__result-test" style="color: #07f7a8">末煤</p>
      </div>
      <div class="sieves-image__result-box">
        <div class="user_overview_nums third " >
          <dv-digital-flop :config="sieveConfig" class="sieves-image__result-flop" />
        </div>
        <p class="sieves-image__result-test" style="color: #e3b337">空筛</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { GET } from '@/api'
import useSettingStore from "@/stores/setting";

const props = defineProps({
  deviceId: {
    type: String,
    required: true
  }
})
let timer:number

const imageUrl = ref('')
const lumpCoal = ref(0)
const slack = ref(0)
const sieve = ref(0)

onMounted(()=>{
  getData()
  nextTick(() => {
    swiper()
  })
})

const lumpCoalConfig = computed(()=>{
  return {
    number: [lumpCoal.value],
    content: '{nt}%',
    style: {
      fontSize: 24,
      fill: "#00fdfa",
    }
  }
})

const slackConfig = computed(()=>{
  return {
    number: [slack.value],
    content: '{nt}%',
    style: {
      fontSize: 24,
      fill: "#07f7a8",
    }
  }
})

const sieveConfig = computed(()=>{
  return {
    number: [sieve.value],
    content: '{nt}%',
    style: {
      fontSize: 24,
      fill: "#e3b337",
    }
  }
})

function clearData() {
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}
function getData(){
  GET("realTimeData",{deviceId: props.deviceId}).then((res) => {
    if (res.code === 200) {
      res.data.forEach(e=>{
        if(e.dictValue === 3000){
          imageUrl.value = import.meta.env.VITE_APP_BASE_API + '/image/'+e.remark+'.jpg'
          lumpCoal.value = Number(e.dataValue)
        } else if (e.dictValue === 3001) {
          slack.value = Number(e.dataValue)
        } else if (e.dictValue === 3002) {
          sieve.value = Number(e.dataValue)
        }
      })
    }else {
      Window.$message({
        message: res.msg,
        type: "warning",
      })
    }
  })
}

function swiper(){
  if (timer) {
    return
  }
  let looper = () => {
    getData()
  }
  timer = setInterval(looper, useSettingStore().listAutoTime);
}
</script>

<style scoped lang="scss">
.sieves-image__box {
  width: 100%;
  height: 98%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  .sieves-image__content {
    width: 85%;
    height: 96%;
    .sieves-image__content-image{
      width: 100%;
      height: 100%;
      object-fit:fill;
    }
  }

  .sieves-image__result {
    width: 15%;
    height: 96%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .sieves-image__result-box{
      width: 100%;
      height: 50%;
    }
  }

  .user_overview_nums {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 22px;
    margin: auto;
    background-size: cover;
    background-position: center center;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    &.user_overview_nums::before {
      animation: rotating 14s linear infinite;
    }
  }

  .sieves-image__result-test {
    text-align: center !important;
    font-size: 20px;
    margin-top: 5px;
  }

  .sieves-image__result-flop {
    width: 100px;
    height: 100px;
  }

  .first {
    &::before {
      background-image: url("@/assets/img/left_top_lan.png");

    }
  }

  .second {
    &::before {
      background-image: url("@/assets/img/left_top_lv.png");

    }
  }

  .third {
    &::before {
      background-image: url("@/assets/img/left_top_huang.png");
    }
  }
}
</style>